<script setup>
import { watch } from 'vue'
import dayjs from "dayjs";
import TagsComp from "@/components/Tool/TagsComp.vue"
const props = defineProps(['screen'])
const screen = props.screen

screen.timeLimit = []
screen.isOrAll = false
screen.contentInclude = []
screen.isOrContent = false
screen.peopleInclude = []
screen.isOrPeople = false
screen.tagsInclude = []
screen.isOrTags = false
screen.exclude = []  // 不包括，填入noteI
screen.noteType = 'all'

watch(screen.timeLimit, () => {
  // 判断时间先后
  if (screen.timeLimit[0] && screen.timeLimit[1] && dayjs(screen.timeLimit[0]).diff(dayjs(screen.timeLimit[1])) > 0) {
    delete screen.timeLimit[1]
    ElMessage("结束时间必须在开始时间之后哦！");
  }
})

// 筛选函数，由notesView调用，输入一个note返回布尔
screen.screenFunc = (note, screen) => {
  // 记录状态
  if (screen.noteType != 'all' && note.noteType != screen.noteType) return false;

  // 时间限制，包含两头
  if (screen.timeLimit[0] && dayjs(note.noteTime).diff(dayjs(screen.timeLimit[0])) < 0) return false;
  if (screen.timeLimit[1] && dayjs(note.noteTime).diff(dayjs(screen.timeLimit[1])) > 86400000) return false;

  // 排除
  if (screen.exclude.indexOf(note.noteId) != -1) return false;

  // 判断arr是否含有includeArr, isOr为true则全部都要有
  let include = (arr, includeArr, isOr) => {
    if (!arr || !arr.length) return false;

    for (const value of includeArr) {
      if (arr.indexOf(value) != -1) { // 有
        if (isOr) return true;  // 或
        else continue; // 与
      } else { // 无
        if (!isOr) return false; // 与
        else continue; // 或
      }
    }
    return !isOr;
  }

  if (screen.contentInclude.length) {
    if (include(note.noteContent, screen.contentInclude, screen.isOrContent)) { // 有
      if (screen.isOrAll) return true; // 或
    } else { // 无
      if (!screen.isOrAll) return false; // 与
    }
  }
  if (screen.peopleInclude.length) {
    if (include(note.notePeople, screen.peopleInclude, screen.isOrPeople)) { // 有
      if (screen.isOrAll) return true; // 或
    } else { // 无
      if (!screen.isOrAll) return false; // 与
    }
  }
  if (screen.tagsInclude.length) {
    if (include(note.noteTags, screen.tagsInclude, screen.isOrTags)) { // 有
      if (screen.isOrAll) return true; // 或
    } else { // 无
      if (!screen.isOrAll) return false; // 与
    }
  }

  return !screen.isOrAll;
}
</script>

<template>
  <div style="border: 1px dashed var(--el-border-color-light);border-radius: 10px;padding: 5px;margin-bottom: 5px;">
    <el-row style="margin-bottom:5px;">
      记录状态：
      <el-radio-group size="small" v-model="screen.noteType">
        <el-radio-button label="all">全部</el-radio-button>
        <el-radio-button label="">隐私</el-radio-button>
        <el-radio-button label="public">公开</el-radio-button>
      </el-radio-group>
    </el-row>
    <el-row style="margin-bottom:5px;">
      时间限制：
      <el-date-picker v-model="screen.timeLimit[0]" type="date" placeholder="起始日期" size="small" :editable="false"
        style="width:120px;" />
      &nbsp;~&nbsp;
      <el-date-picker v-model="screen.timeLimit[1]" type="date" placeholder="结束日期" size="small" :editable="false"
        style="width:120px;" />
    </el-row>

    <el-row>
      <TagsComp :tags="screen.contentInclude" label="内容含有">
        <el-switch v-model="screen.isOrContent" size="small" active-text="或运算" style="margin-right:10px" />
      </TagsComp>
    </el-row>
    <el-row>
      <TagsComp :tags="screen.peopleInclude" label="人员含有">
        <el-switch v-model="screen.isOrPeople" size="small" active-text="或运算" style="margin-right:10px" />
      </TagsComp>
    </el-row>
    <el-row>
      <TagsComp :tags="screen.tagsInclude" label="标签含有">
        <el-switch v-model="screen.isOrTags" size="small" active-text="或运算" style="margin-right:10px" />
      </TagsComp>
    </el-row>
    <el-row>
      <el-switch v-model="screen.isOrAll" size="small" active-text="内容、人员、标签做或运算" />
    </el-row>
    <el-row v-if="screen.exclude.length">
      排除 ID ：
      <el-tag v-for="tag in screen.exclude" :key="tag" closable
        @close="screen.exclude.splice(screen.exclude.indexOf(tag), 1)" style="margin-right:5px;margin-bottom:5px">
        {{ tag }}</el-tag>
    </el-row>
  </div>
</template>

<style scoped>
::v-deep(.el-switch__label--right) {
  margin-left: 3px;
}
</style>